<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色调研</title>
    <style>
        .function-content{
            width: 1544.4px;
            margin-left: 52px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .woshi-space{
            width: 776.4px;
        }
        .space-button{
            background-color: #F58220;
            width: 276px;
            text-align: center;
            font-size: 20px;
            line-height: 40.8px;
            border-radius: 20.4px;
            color: #FFFFFF;
        }
        
        .xuqiu-foot{
            width: 650px;
            text-align: center;
            color: #B7B7B7;
            font-size: 18px;
            margin-top: 50px;
        }
        .xuqiu-input{
            background-color: #EDEDED;
            width: 358px;
            height: 35px;
            border: #EDEDED 0px solid;
            outline: 0;
            font-size: 18px;
            margin-top: 21px;
            border-radius: 17.5px;
            padding-left: 10px;
        }
        .you-addr{
            width: 1544.4px;
            margin-left: 52px;
            text-align: right;
            color: #7E7E7E;
            font-size: 19px;
            margin-top: 22px;
        }
        .xuqiu-button-foot{
            width: 1544.4px;
            margin-left: 52px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 70px;
        }
        .xuqiu-button{
            background-color: #F58220;
            padding: 6px 29px;
            border-radius: 19px;
            color: #FFFFFF;
            margin: 0 15px;
        }
        .edge-space{
            width: 108px;
            height: 46px;
            border-radius: 23px 0 0 23px;
            position: absolute;
            top: 740px;
            right: 0;
            background-color: #F58220;
            line-height: 46px;
            text-align: center;
            color: #FFFFFF;
        }
        .show-info{
            width: 678px;
            height: 453px;
            position: absolute;
            top: 314px;
            left: 621px;
            display: none;
        }
        .role-list{
            width: 650px;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .radio{
            width: 20px;
            height: 20px;
            border: #999999 1px solid;
            border-radius: 10px;
            margin-right: 9px;
        }
        .selected{
            border: #F58220 1px solid;
            background-color: #F58220;
        }
        .role-item{
            width: 150px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 25px 0;
        }
        .add-role{
            width: 622px;
            height: 554px;
            position: absolute;
            top: 263px;
            left: 648px;
            background-color: rgba(245, 130, 32, 0.9);
            border-radius: 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FFFFFF;
            display: none;
        }
        .role-column{
            width: 401px;
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 22px;
            margin-bottom: 42px;
        }
        .add-input{
            width: 296px;
            height: 50px;
            background-color: #FFFFFF;
            border-radius: 17.5px;
            padding: 0 10px 0 20px;
            border: #FFFFFF 0 solid;
            outline: 0;
            color: #F58220;
            font-size: 22px;
        }
        .sex{
            width: 296px;
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .sex-radio{
            width: 20px;
            height: 20px;
            border: #999999 1px solid;
            border-radius: 10px;
            margin-right: 14px;
        }
        .sex-selected{
            border: #f4ec2f 1px solid;
            background-color: #f4ec2f; 
        }
        .add-space{
            position: absolute;
            top: 0px;
            right: 0px;
            width: 490px;
            height: 1080px;
            background-color: rgba(245, 130, 32, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #FFFFFF;
        }
        .add-button{
            width: 246px;
            height: 60px;
            margin-top: 90px;
            background-color: #FFFFFF;
            border-radius: 14px;
            text-align: center;
            line-height: 60px;
            color: #F58220;
            font-size: 30px;
        }
        .space-list{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .space-item{
            margin-top: 60px;
            font-size: 26px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .space-selected{
            font-weight: bold;
            border-bottom: #FFFFFF 2px solid;
            padding: 0 60px 22px 60px;
        }
        .space-sure{
            position: absolute;
            bottom: 129px;
            width: 170px;
            height: 60px;
            font-size: 26px;
            color: #F58220;
            background-color: rgba(255, 255, 255, 0.86);
            text-align: center;
            line-height: 60px;
            border-radius: 14px;
        }
    </style>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="heard">
        <img src="img/woniu_logo@2x.png" style="width: 307px;height: 68px;margin-left: 8px;margin-top: 63px;">
        <div class="right-top">
            <div class="heard-item">
                <img src="img/woniu_self@2x.png" style="width: 37px;height: 37px;margin-bottom: 14px;">
                <div>个人主页</div>
            </div>
            <div class="heard-item" onclick="showNavigation()">
                <img src="img/woniu_caidan@2x.png" style="width: 31px;height: 37px;margin-bottom: 14px;">
                <div>功能导航</div>
            </div>
        </div>
    </div>
    <div class="content" style="background-color: #FAFAFA;">
        <div style="height: 61px;"></div>
        <div class="function-content">
            <div class="woshi-space">
                <div class="space-button">宝宝（新生婴儿 0-6岁）</div>
                <div style="font-size: 20px;margin-top: 30px;color: #F58220;">兴趣/爱好</div>
                <div class="role-list">
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>睡觉</div>
                    </div>
                    <div class="role-item">
                        <div class="radio selected"></div>
                        <div>辅食</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>抓人</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>爬行</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>洗澡</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>游泳</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>听音乐</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>讲故事</div>
                    </div>
                </div>
                <div style="font-size: 20px;margin-top: 30px;color: #F58220;">健康状况</div>
                <div class="role-list">
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>夜惊</div>
                    </div>
                    <div class="role-item">
                        <div class="radio selected"></div>
                        <div>湿疹</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>回呕</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>打嗝</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>失眠不安</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>低烧</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>便秘</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>蚊虫叮咬</div>
                    </div>
                </div>
                <div style="font-size: 20px;margin-top: 30px;color: #F58220;">功能设计</div>
                <div class="role-list">
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>防撞设计</div>
                    </div>
                    <div class="role-item">
                        <div class="radio selected"></div>
                        <div>放触电设计</div>
                    </div>
                    <div class="role-item">
                        <div class="radio"></div>
                        <div>婴儿护理洗漱台</div>
                    </div>
                </div>
                <div class="xuqiu-foot">- 问题选项全部加载完成 -</div>
            </div>
            <img src="img/bgd.png" style="width: 778px;height: 646px; border-radius: 30px;">
        </div>
        <div class="xuqiu-button-foot">
            <div class="xuqiu-button" onclick="sureAdd()">确定并新增</div>
            <div class="xuqiu-button">确定并返回首页</div>
        </div>
    </div>
    <div class="navigation" id="navigation">
        <div class="navigation-top"></div>
        <div class="navigation-content">
            <div class="navigation-item">
                <img src="img/baogao@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>调研报告</div>
            </div>
            <div class="navigation-heng"></div>
            <div class="navigation-item">
                <img src="img/tuichu@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>退出登录</div>
            </div>
        </div>
    </div>
    <div class="foot">Copyright © 2021 All rights reserved.蜗牛渼家 用户需求调研与分析系统</div>
    <div class="edge-space" onclick="changeRole()">切换角色</div>
    <div class="show-info" id="showInfo">
        <img src="img/bgd.png" style="width: 100%;height: 100%;border-radius: 30px;">
    </div>
    <div class="add-role" id="addRole">
        <div style="margin-top: 71px;font-size: 30px;margin-bottom: 72px;">新增角色</div>
        <div class="role-column">
            <div style="width: 105px;">家庭角色:</div>
            <input type="text" class="add-input" placeholder="外婆">
        </div>
        <div class="role-column">
            <div style="width: 105px;">年龄端:</div>
            <input type="text" class="add-input" placeholder="老年（69岁以上）">
        </div>
        <div class="role-column">
            <div style="width: 105px;align-self: flex-start;">性别:</div>
            <div class="sex">
                <div class="sex-radio sex-selected"></div>
                <span style="margin-right: 36px;">男</span>
                <div class="sex-radio"></div>
                <span>女</span>
            </div>
        </div>
        <div>
            <span style="font-size: 22px;color: #F58220;padding: 7px 40px;background-color: #FFFFFF;border-radius: 7px;" onclick="sureAddRole()">确定</span>
        </div>
    </div>
    <div class="add-space" id="changeRole" onmouseleave="changeRoleLeave()">
        <div class="add-button"><span>切换角色</span></div>
        <div class="space-list">
            <div class="space-item">父亲（中年46-69岁）</div>
            <div class="space-item">青少年（中年13-17岁）</div>
            <div class="space-item space-selected">奶奶（老年69岁以上）</div>
        </div>
        <div class="space-sure" onclick="sideSureAddRole()"><span>新增角色</span></div>
    </div>
</body>
<script>
    let navigationShow = true
    function showNavigation() {
        if (navigationShow == true) {
            document.getElementById("navigation").style.display = "block";
            navigationShow = false
        } else {
            document.getElementById("navigation").style.display = "none";
            navigationShow = true
        }
    }
    function changeRole() {
        document.getElementById("changeRole").style.display = "flex";
    }
    function sureAdd() {
        document.getElementById("addRole").style.display = "flex";
    }
    function sureAddRole() {
        document.getElementById("addRole").style.display = "none";
    }
    function sideSureAddRole() {
        document.getElementById("changeRole").style.display = "none";
        document.getElementById("addRole").style.display = "flex";
    }
    function changeRoleLeave() {
        document.getElementById("changeRole").style.display = "none";
    }
</script>
</html>